import bookImg from '../../../../static/img/book.jpg'
import './index.scss'
import Header from "../../../../components/Header";
import {useParams} from "react-router-dom";
import {literatureDetail} from "../../../../api/api";
import {useEffect, useState} from "react";
import moment from "moment";
import {Button, Modal} from "antd-mobile";

const LiteratureDetail = () => {
    // 文献id
    const {id} = useParams();
    // 数据
    const [data, setData] = useState<any>({});
    // // 类型
    const [fileType, setFileType] = useState<string>('');
    const getData = () => {
        literatureDetail(id as string).then(r => {
            setData(r);
            const url = r.file.path;
            setFileType(url.substring(url.lastIndexOf(".") + 1));
        })
    }
    // 请求
    useEffect(() => {
        getData();
    }, []);

    const readFile = () => {
        Modal.alert({
            header: (
                fileType === 'mp3' ? <audio src={data?.file?.path} controls/> : fileType === "mp4" ?
                    <video style={{width: "100%", height: "146px", objectFit: "contain"}} src={data?.file?.path}
                           controls/> : null
            ),
            title: "阅读文献",
            content: (
                <>
                    <div>当前文献类型为{fileType === "mp3" ? '音频文献' : fileType === "mp4" ? "视频文献" : "pdf文献"}</div>
                    {
                        fileType === "pdf" ?
                            (
                                <div>
                                    <p style={{
                                        color: "red",
                                        fontSize: "12px",
                                    }}>pdf文献需要<a download="下载pdf" href={data.file.path}>下载</a>后才能查看</p>
                                </div>
                            )
                            : null
                    }
                </>
            ),
            confirmText: "关闭"
        })
    }
    return (
        <div className="literature-detail-box">
            <Header title={data.name}/>
            <div>
                <div>
                    <img src={data?.cover?.path} alt=""/>
                </div>
                <div>
                    <h2>{data.name}</h2>
                    <p>作者：{data?.author ? data?.author : "不详"}</p>
                    <p>出版社：{data.press ? data.press : "不详"}</p>
                    <p>更新时间：{moment(data.created_at * 1000).format("YYYY-MM-DD HH:mm:ss")}</p>
                </div>
            </div>
            <div>
                <h3>简介</h3>
                <p>{data?.introduce ? data?.introduce : "不详"}</p>
            </div>
            <div>
                <Button block color='primary' size='large' onClick={readFile}>
                    开始阅读
                </Button>
                {/*{*/}
                {/*    fileType === "mp3" ? (*/}
                {/*        <audio src={data?.file?.path} controls/>*/}
                {/*    ) : <video src={data?.file?.path} controls/>*/}
                {/*}*/}
            </div>
        </div>
    )
}

export default LiteratureDetail;